<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择某个特定商品</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <ul>
            <product v-for="item,index in products" :item="item" :index="index" @clicked="changed"></product>
        </ul>
        <p>当前被选中的商品名为:{{Fin}}</p>
    </div>

    <script>
        Vue.component('product',{
        	template:"<li>" +
                "<h3>{{index}}-商品名称:{{item.name}}</h3>" +
                "<h4>商品价格:{{item.price}}</h4>" +
                "<h4>商品产地:{{item.location}}</h4>\n" +
                "<button @click='clicked(item.name)'>点击选中此商品</button>" +
                "</li>"
            ,
            props:['item','index'],
            methods: {
        		clicked:function(name){
        			this.$emit('clicked',name)
		        }
            }
        })

        let app = new Vue({
            el:"#app",
            data:{
            	Fin:"暂无选中",
            	products:[{
            		name:'可乐',
                    price:3,
                    location:'厦门',
                },{
		            name:'雪碧',
		            price:4,
		            location:'漳州',
	            },{
		            name:'芝士桃桃',
		            price:17,
		            location:'古茗',
	            },
                ]
            },
            methods:{
                changed:function (name) {
                    this.Fin = name
                }
            }
        })
    </script>
</body>
</html>